// 导入Sass颜色模块
@use "sass:color";
@use "sass:map";

// 科幻风格UI色调系统 - SCSS变量定义
// 分类说明：按功能角色划分，保持视觉一致性和使用规范性

// ==========================================
// 1. 基础主色调（品牌核心色）
// ==========================================
$color-primary: (
        cyan: (
                base: #00f0ff,
                light: #66e6ff,
                lighter: #b3f2ff,
                dark: #00a8cc,
                darker: #007a99,
                alpha-10: rgba(0, 240, 255, 0.1),
                alpha-20: rgba(0, 240, 255, 0.2),
                alpha-30: rgba(0, 240, 255, 0.3),
                description: "主色调，用于标题、核心图标、重点边框"
        ),
        blue: (
                base: #00a8ff,
                light: #66c5ff,
                lighter: #b3e2ff,
                dark: #007acc,
                darker: #005c99,
                alpha-10: rgba(0, 168, 255, 0.1),
                alpha-20: rgba(0, 168, 255, 0.2),
                description: "次级主色，用于链接、进度指示、次要交互元素"
        )
);

// ==========================================
// 2. 功能辅助色（状态与操作指示）
// ==========================================
$color-functional: (
        success: (
                base: #00ff9d,
                light: #66ffc5,
                lighter: #b3ffde,
                dark: #00cc7a,
                darker: #00995c,
                alpha-10: rgba(0, 255, 157, 0.1),
                description: "表示成功、正常运行、健康状态"
        ),
        warning: (
                base: #ffc107,
                light: #ffd555,
                lighter: #ffe8a3,
                dark: #cca000,
                darker: #997500,
                alpha-10: rgba(255, 193, 7, 0.1),
                description: "表示警告、需注意事项、中等资源状态"
        ),
        danger: (
                base: #ff2e63,
                light: #ff6b8f,
                lighter: #ffa8bc,
                dark: #cc003d,
                darker: #99002e,
                alpha-10: rgba(255, 46, 99, 0.1),
                description: "表示错误、故障、危险操作、资源不足"
        ),
        special: (
                base: #a78bfa,
                light: #c4a9ff,
                lighter: #e1d6ff,
                dark: #7f5cd0,
                darker: #5f45a6,
                alpha-10: rgba(167, 139, 250, 0.1),
                description: "表示特殊功能、加密、未知状态、高级选项"
        ),
        maintenance: (
                base: #ff7d00,
                light: #ff9e55,
                lighter: #ffbf90,
                dark: #cc6400,
                darker: #994b00,
                alpha-10: rgba(255, 125, 0, 0.1),
                description: "表示维护中、手动干预、需要关注的元素"
        )
);

// 快捷引用变量
$cyan: map.get(map.get($color-primary, cyan), base);
$cyan-light: map.get(map.get($color-primary, cyan), light);
$cyan-dark: map.get(map.get($color-primary, cyan), dark);
$blue: map.get(map.get($color-primary, blue), base);
$blue-light: map.get(map.get($color-primary, blue), light);
$blue-dark: map.get(map.get($color-primary, blue), dark);
$success: map.get(map.get($color-functional, success), base);
$warning: map.get(map.get($color-functional, warning), base);
$danger: map.get(map.get($color-functional, danger), base);
$special: map.get(map.get($color-functional, special), base);
$maintenance: map.get(map.get($color-functional, maintenance), base);

// ==========================================
// 3. 主题变量（使用新的Sass颜色函数）
// ==========================================

// 主色系
$primary-color: $cyan;
$primary-color-hover: color.adjust($cyan, $lightness: 10%);
$primary-color-active: color.adjust($cyan, $lightness: -10%);
$primary-color-outline: rgba($cyan, 0.2);

// 信息色
$info-color: $blue;
$info-color-hover: color.adjust($blue, $lightness: 10%);
$info-color-active: color.adjust($blue, $lightness: -10%);

// 成功色
$success-color: $success;
$success-color-hover: color.adjust($success, $lightness: 10%);
$success-color-active: color.adjust($success, $lightness: -10%);

// 警告色
$warning-color: $warning;
$warning-color-hover: color.adjust($warning, $lightness: 10%);
$warning-color-active: color.adjust($warning, $lightness: -10%);

// 错误色
$error-color: $danger;
$error-color-hover: color.adjust($danger, $lightness: 10%);
$error-color-active: color.adjust($danger, $lightness: -10%);

// 特殊色
$highlight-color: $special;
$processing-color: $primary-color;

// ==========================================
// 4. 背景与文本变量
// ==========================================

// 背景色
$body-background: #050a1a;
$component-background: rgba(10, 17, 40, 0.85);
$popover-background: rgba(10, 17, 40, 0.85);

// 文本色
$text-color: #e0e0e0;
$text-color-secondary: #a0a0a0;
$text-color-inverse: #fff;
$heading-color: $cyan;

// 禁用色
$disabled-color: #606060;
$disabled-bg: rgba(96, 96, 96, 0.1);

// ==========================================
// 5. 边框与分割线变量
// ==========================================

// 边框色
$border-color-base: rgba(0, 240, 255, 0.2);
$border-color-split: rgba(0, 240, 255, 0.1);
$border-color-inverse: #fff;

// 边框样式
$border-radius-base: 4px;
$border-radius-sm: 2px;
$border-width-base: 1px;
$border-style-base: solid;

// ==========================================
// 6. 阴影与发光效果变量
// ==========================================

// 阴影
$box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
$box-shadow-secondary: 0 2px 8px rgba(0, 0, 0, 0.15);

// 发光效果
$glow-effect-primary: 0 0 5px rgba(0, 240, 255, 0.5);
$glow-effect-primary-hover: 0 0 10px rgba(0, 240, 255, 0.7);
$glow-effect-success: 0 0 5px rgba(0, 255, 157, 0.5);
$glow-effect-warning: 0 0 5px rgba(255, 193, 7, 0.5);
$glow-effect-error: 0 0 5px rgba(255, 46, 99, 0.5);

// ==========================================
// 7. 组件特定变量
// ==========================================

// 按钮
$btn-primary-bg: $primary-color;
$btn-primary-border: $primary-color;
$btn-default-bg: transparent;
$btn-default-border: $border-color-base;
$btn-default-color: $text-color;
$btn-danger-bg: $error-color;
$btn-danger-border: $error-color;

// 输入框
$input-bg: rgba(255, 255, 255, 0.05);
$input-border-color: $border-color-base;
$input-hover-border-color: $cyan;
$input-placeholder-color: $text-color-secondary;

// 表格
$table-header-bg: rgba($cyan, 0.1);
$table-row-hover-bg: rgba($cyan, 0.05);
$table-selected-row-bg: rgba($cyan, 0.1);
$table-expanded-row-bg: rgba($cyan, 0.03);

// 菜单
$menu-dark-bg: $body-background;
$menu-dark-item-active-bg: rgba($cyan, 0.2);
$menu-dark-item-selected-bg: rgba($cyan, 0.3);
$menu-dark-highlight-color: $cyan;

// 标签
$tag-default-bg: rgba($cyan, 0.1);
$tag-default-color: $cyan;
$tag-font-size: 12px;

// 进度条
$progress-default-color: $primary-color;
$progress-remaining-color: rgba($cyan, 0.1);

// 分页
$pagination-item-bg: transparent;
$pagination-item-bg-active: rgba($cyan, 0.2);
$pagination-item-link-bg: transparent;
$pagination-item-input-bg: transparent;

// ==========================================
// 8. 布局与间距变量
// ==========================================

// 间距
$padding-lg: 24px;
$padding-md: 16px;
$padding-sm: 12px;
$padding-xs: 8px;

// 高度
$height-base: 32px;
$height-lg: 40px;
$height-sm: 24px;

// 字体
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

// ==========================================
// 9. 实用混合宏（使用新的颜色函数）
// ==========================================

// 发光效果混合宏
@mixin neon-glow($color, $intensity: 5px) {
  @if $intensity == 5px {
    box-shadow: 0 0 5px rgba($color, 0.5);
  } @else if $intensity == 10px {
    box-shadow: 0 0 10px rgba($color, 0.7);
  } @else {
    box-shadow: 0 0 $intensity rgba($color, 0.5);
  }
}

// 科幻风格卡片混合宏
@mixin sci-fi-card {
  background: $component-background;
  border: 1px solid $border-color-base;
  border-radius: $border-radius-base;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            $cyan 50%,
            transparent 100%);
    opacity: 0.7;
  }

  &:hover {
    border-color: $cyan;
    @include neon-glow($cyan, 10px);
  }
}

// 科幻风格按钮混合宏
@mixin sci-fi-button {
  border: 1px solid;
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
                    to bottom right,
                    rgba(255, 255, 255, 0.2),
                    rgba(255, 255, 255, 0.1),
                    transparent
    );
    transform: rotate(45deg);
    transition: all 0.3s;
    opacity: 0;
  }

  &:hover::before {
    opacity: 1;
  }
}

// 科幻风格输入框混合宏
@mixin sci-fi-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid $border-color-base;
  border-radius: $border-radius-base;
  transition: all 0.3s;

  &:focus, &:hover {
    border-color: $cyan;
    box-shadow: 0 0 0 2px rgba($cyan, 0.2);
  }

  &::placeholder {
    color: $text-color-secondary;
  }
}

// ==========================================
// 10. 主题应用示例
// ==========================================

// 应用主题到Ant Design组件
.ant-btn {
  &.ant-btn-primary {
    @include sci-fi-button;
    border-color: $primary-color;
    color: $primary-color;
    @include neon-glow($primary-color);

    &:hover, &:focus {
      border-color: $primary-color-hover;
      color: $primary-color-hover;
      @include neon-glow($primary-color, 10px);
    }
  }

  &.ant-btn-default {
    @include sci-fi-button;
    border-color: $border-color-base;
    color: $text-color;

    &:hover, &:focus {
      border-color: $primary-color;
      color: $primary-color;
    }
  }
}

.ant-card {
  @include sci-fi-card;
}

.ant-input {
  @include sci-fi-input;
}

.ant-menu {
  &.ant-menu-dark {
    background: $menu-dark-bg;

    .ant-menu-item {
      &:hover {
        background: rgba($cyan, 0.1);
      }

      &.ant-menu-item-selected {
        background: $menu-dark-item-selected-bg;
        @include neon-glow($primary-color);
      }
    }
  }
}

.ant-table {
  .ant-table-thead > tr > th {
    background: $table-header-bg;
    border-bottom: 1px solid $border-color-base;
  }

  .ant-table-tbody > tr {
    &:hover > td {
      background: $table-row-hover-bg;
    }

    &.ant-table-row-selected > td {
      background: $table-selected-row-bg;
    }
  }
}

.ant-tag {
  background: $tag-default-bg;
  color: $tag-default-color;
  border: 1px solid rgba($cyan, 0.3);

  &.ant-tag-green {
    background: rgba($success, 0.1);
    color: $success;
    border-color: rgba($success, 0.3);
  }

  &.ant-tag-orange {
    background: rgba($warning, 0.1);
    color: $warning;
    border-color: rgba($warning, 0.3);
  }

  &.ant-tag-red {
    background: rgba($danger, 0.1);
    color: $danger;
    border-color: rgba($danger, 0.3);
  }
}

.ant-progress {
  .ant-progress-bg {
    background: $progress-default-color;
  }

  .ant-progress-outer {
    background: $progress-remaining-color;
  }
}

// 自定义科幻风格组件
.sci-fi-panel {
  @include sci-fi-card;
  padding: $padding-lg;

  .sci-fi-panel-title {
    color: $cyan;
    margin-bottom: $padding-md;
    font-size: $font-size-lg;
    font-weight: bold;
    text-shadow: 0 0 5px $cyan, 0 0 10px rgba($cyan, 0.7);
  }
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: $padding-md;

  .data-item {
    @include sci-fi-card;
    padding: $padding-sm;
    text-align: center;

    .value {
      font-size: 24px;
      font-weight: bold;
      color: $cyan;
      text-shadow: 0 0 5px $cyan, 0 0 10px rgba($cyan, 0.7);
    }

    .label {
      color: $text-color-secondary;
      font-size: $font-size-sm;
    }
  }
}